<template>
	<view :style="{display: type != '0' ? '' : 'none' }" class="message">
		<view class="">
			<view class="" style="margin-bottom: 20rpx;text-align: right;">
				{{ userInfo.service_info ? userInfo.service_info.name : userInfo.nickname }}
			</view>

			<view class="message-info">
				<div v-if="item.receiptStatus == 2" class="receipt">已读</div>
				<div v-if="item.receiptStatus == 1" class="receipt">未读</div>
				<view v-if="type == '1'" class="message-text">
					{{ item.message }}
				</view>
				<view v-if="type == '11'" class="message-img">
					<image style="max-width: 180rpx; height: 180rpx" :src="item.message" mode="aspectFit"
						@click="previewImage(item.message)"></image>
				</view>
				<view v-if="type == '111' && item.message != '[表情]'" class="message-bqb">
					<image style="max-width: 180rpx; height: 180rpx" :src="item.message" mode="aspectFit" />
				</view>
				<view v-if="type == 'order'" class="message-goods" @click="goOrder(getExtendedData(item))">
					<view class="goods-info flex-center-1">
						<image :src="getExtendedData(item).pic" alt=""></image>
						<view class="title">
							{{ getExtendedData(item).name }}
							<text>
								{{
			                                getExtendedData(item).money == 0
			                                    ? "面议"
			                                    : "￥" + getExtendedData(item).money
			                            }}
							</text>
						</view>
					</view>
				</view>
				<view v-if="type == 'file'" :href="getExtendedData(item).fileUlr" target="_self" :title="item.message"
					class="file" @click="lookFile(getExtendedData(item).fileUlr)">
					<image class="model_icon" :src="getFileType(getExtendedData(item).fileUlr)" alt=""></image>
					<view>
						{{ item.message }}
					</view>
				</view>
				<view v-if="type == 'shop'" class="message-goods" @click="goShop(getExtendedData(item))">
					<view class="goods-info flex-center-1">
						<image :src="getExtendedData(item).pic" alt=""></image>
						<view class="title">
							{{ getExtendedData(item).name }}
							<text>
								{{
			                                getExtendedData(item).price == 0
			                                    ? "面议"
			                                    : "￥" + getExtendedData(item).price
			                            }}
							</text>
						</view>
					</view>
				</view>

			</view>
		</view>

		<image :src="
		                userInfo.is_server == 1
		                    ? userInfo.service_info.logo
		                    : userInfo.avatar
		            " class="avatar" mode="aspectFill" alt=""></image>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		name: "messageRight",
		props: {
			type: {
				type: String,
				default: "0",
			},
			item: {
				type: Object,
				default: function() {
					return {};
				},
			},
		},
		data() {
			return {
				userInfo: null,
				getTime: (time) => {
					var date = new Date(time);
					let Y = date.getFullYear() + '-';
					let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
					let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
					let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
					let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
					let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
					return `${Y}${M}${D}${h}${m}${s}`
				},
				getExtendedData: function(item) {
					return JSON.parse(item.extendedData);
				},
				getFileType: function(url) {
					let type = url.split(".");
					type = type[type.length - 1];
					switch (type) {
						case "doc":
							return require("@/static/message/model_word.png");
						case "docx":
							return require("@/static/message/model_word.png");
						case "ppt":
							return require("@/static/message/model_ppt.png");
						case "pptx":
							return require("@/static/message/model_ppt.png");
						case "xls":
							return require("@/static/message/model_excel.png");
						case "xlsx":
							return require("@/static/message/model_excel.png");
						case "xlsm":
							return require("@/static/message/model_excel.png");
						case "pdf":
							return require("@/static/message/model_pdf.png");
						case "rar":
							return require("@/static/message/model_zip.png");
						case "zip":
							return require("@/static/message/model_zip.png");
						case "7z":
							return require("@/static/message/model_zip.png");
						case "gz":
							return require("@/static/message/model_zip.png");
						case "tar":
							return require("@/static/message/model_zip.png");
						case "bz2":
							return require("@/static/message/model_zip.png");
						case "iso":
							return require("@/static/message/model_zip.png");
						default:
							return require("@/static/message/icon_xz.png");
					}
				},
			};
		},
		computed: {

		},
		watch: {},
		created() {},
		mounted() {
			this.userInfo = this.$store.state.userInfo
		},
		methods: {
			goOrder(item) {
				uni.navigateTo({
					url: '/pagesOrder/orderDetail/orderDetail?orderNo=' + item.order_no
				})
				// this.$router.push({
				// 	path: "/PlaceOrder",
				// 	query: {
				// 		orderNo: item.order_no,
				// 	},
				// });
			},
			goShop(item) {
				uni.navigateTo({
					url: '/pagesShop/shopDetail/shopDetail?id=' + item.id
				})
				// this.$router.push({
				// 	path: "/ServiceShopsDetail",
				// 	query: {
				// 		id: item.id,
				// 	},
				// });
			},
			previewImage(image) {
				uni.previewImage({
					urls: [image]
				});
			},

			lookFile(fileUlr) {
				let type = fileUlr.split(".");
				type = type[type.length - 1];
				let types = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx']
				console.log(type, fileUlr)
				if (types.indexOf(type) != -1) {
					uni.showLoading({
						title: '打开文件中',
						mask: true
					});
					uni.downloadFile({
						url: fileUlr,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									uni.hideLoading();
								},
								fail: function(err) {
									uni.hideLoading();
								}
							});
						},
						fail: function(err) {
							uni.hideLoading();
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '小程序不支持该格式文件预览',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.message {
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		margin-bottom: 50rpx;

		.avatar {
			margin-right: 34rpx;
			width: 80rpx;
			height: 80rpx;
			object-fit: cover;
			border-radius: 40rpx;
			margin-left: 25rpx;
		}
	}

	.message-info {
		position: relative;
		flex-wrap: wrap;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;

		.receipt {
			// position: absolute;
			font-size: 28rpx;
			color: #999999;
			line-height: 100%;
			padding-bottom: 8rpx;
			padding-right: 12rpx;
		}

		.message-text,
		.message-img,
		.message-bqb {
			padding: 20rpx 28rpx;
			max-width: 480rpx;
			background: #ffffff;
			border-radius: 20rpx;
			border: 1rpx solid #d6d6d6;

			image {
				border-radius: 12rpx;
			}
		}

		.message-text {
			font-size: 28rpx;
			color: #333333;
			line-height: 43rpx;
			white-space: pre-line;
			word-wrap: break-word;
		}
	}

	.message-goods {
		padding: 20rpx 28rpx;
		background: #ffffff;
		border-radius: 12px;
		border: 1rpx solid #d6d6d6;
		width: 467rpx;
		cursor: pointer;

		.text {
			font-size: 34rpx;
			color: #333333;
		}

		.goods-info {
			width: 100%;
			height: 128rpx;
			background: #f9f9f9;
			border-radius: 8rpx;
			display: flex;
			align-items: center;

			image {
				width: 128rpx;
				height: 128rpx;
				border-radius: 8rpx;
			}

			.title {
				padding-left: 36rpx;
				font-size: 28rpx;
				color: #666666;

				text {
					display: block;
					font-size: 28rpx;
					color: #666666;
					padding-top: 14rpx;
				}
			}
		}

		.warning {
			font-size: 28rpx;
			color: #999999;
		}
	}

	.file {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		padding: 26rpx 36rpx;
		padding-top: 22rpx;
		border-radius: 12rpx;
		border: 1rpx solid #d6d6d6;

		image {
			height: 100rpx;
			width: 100rpx;
			margin-right: 30rpx;
		}

		view {
			font-size: 28rpx;
			color: #666;
			width: 267rpx;
			overflow: hidden;
			-webkit-line-clamp: 2;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
	}
</style>